<template>
	<div class="life-detail idcard-wrap">
		<header-nav></header-nav>
		<p class="ldet-title tc pt4 pb4">身份号码查询</p>
		<div class="lifec-content">
			<div class="life-box clearfix mt5 mb5 pl5 pr5">
				<input class="life-input fl" type="text" placeholder="请输入身份号码" autocomplete="off" v-model="idnumber">
				<button class="life-btn fl" v-on:click="idcard">查询</button>
			</div>
		</div>
		<div class="idcard-container pl5 pr5 pt5" v-if="showidcard">
			<ul>
				<li>性别：{{ sex }}</li>
				<li>生日：{{ birthday }}</li>
				<li>地址：{{ address }}</li>
			</ul>
		</div>
	</div>
</template>

<script>
	import HeaderNav from '../../components/header.vue'
	import axios from 'axios'
	export default{
		components : {
			HeaderNav
		},
		data(){
			return{
				iddata:[],
				showidcard:false,
				idnumber:'',
				sex:'',
				birthday:'',
				address:''
			}
		},
		mounted: function() {
		    document.getElementsByTagName("body")[0].className="bgfff"; 
		},
		methods:{
			idcard(){
				if( this.idnumber=='' || this.idnumber==null ){
					alert("请输入身份证号码！")
					return
				}
				else if( this.idnumber.length != 18 ){
					alert("请输入18位数字的身份证号码！")
					return
				}
				let url = '/api/25-3';
				let sign = 'bc41dbe15d504543b791fe0cc5a80e50';
				axios({
					method: 'post',
					url: url,
					params: {
						'showapi_appid':'54164',
				    	'showapi_sign':sign,
				    	'id':this.idnumber
					}
				}).then((res) => {
					console.log(res)
					if ( res.data.showapi_res_body.ret_code == '0' ){
						this.showidcard = true
						this.birthday = res.data.showapi_res_body.retData.birthday
						this.sex = res.data.showapi_res_body.retData.sex == "M" ? "男" : "女"
						this.address = res.data.showapi_res_body.retData.address
					}
					else{
						this.showidcard = false
						alert(res.data.showapi_res_body.retMsg)
					}
					
				}) 
			}
		},
		beforeDestroy () {
		    document.getElementsByTagName("body")[0].className="";
		}
	}
</script>

<style scoped>
	.idcard-container{}
	.idcard-container ul li{line-height: 1.4rem; font-size: .8rem;}
</style>